<template>
	<view class="user flex pr-15px">
		<!-- <el-dropdown trigger="click" @command="handleLangCommand">
			<div class="flex items-center cursor-pointer">
				<dx-icon size="20" color="#757a7e" name="translate"></dx-icon>
			</div>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>
					<el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>
					<el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown> -->
		<view class="flex items-center cursor-pointer ml-18px mr-18px" @click="themeDrawer = true">
			<dx-icon size="20" color="#757a7e" name="theme"></dx-icon>
		</view>
		<view class="flex items-center cursor-pointer mr-20px" @click="clickFullscreen">
			<dx-icon size="20" color="#757a7e" :name="isFullscreen ? 'off-screen' : 'full-screen'"></dx-icon>
		</view>
		<el-dropdown @command="handleUserCommand">
			<view class="flex items-center user-nav">
				<el-avatar :size="25" :src="userStore.userInfo.avatar" />
				<text class="ml-10px mr-8px">{{ userStore.userInfo.nickname || userStore.userInfo.username }}</text>
				<dx-icon name="down"></dx-icon>
			</view>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="1">首页</el-dropdown-item>
					<el-dropdown-item command="2">基本资料</el-dropdown-item>
					<el-dropdown-item divided command="3">退出登陆</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
		<el-drawer v-model="themeDrawer" :with-header="false" class="top-window-drawer" :append-to-body="true" direction="rtl" size="240px">
			<view class="configure-layout">
				<view class="flex justify-between items-center">
					<text>布局配置</text>
					<dx-icon name="close" size="18" @click="themeDrawer = false"></dx-icon>
				</view>
			</view>
			<el-scrollbar class="configure-scrollbar">
				<el-divider content-position="left">全局主题</el-divider>
				<view class="flex justify-between items-center">
					<text>主题颜色</text>
					<el-color-picker v-model="themeStore.themeColor" />
				</view>
				<el-divider content-position="left">菜单设置</el-divider>
				<view class="flex justify-between items-center mb-8px">
					<text>开启菜单手风琴效果</text>
					<el-switch v-model="themeStore.isUniqueOpened" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>开启折叠动画</text>
					<el-switch v-model="themeStore.isCollapseTransition" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>菜单背景颜色</text>
					<el-color-picker v-model="themeStore.menuBgColor" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>子栏菜单背景颜色</text>
					<el-color-picker v-model="themeStore.menuInlineBgColor" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>开启菜单高亮</text>
					<el-switch v-model="themeStore.isOpenSelectBgColor" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>菜单选中高亮背景</text>
					<el-color-picker v-model="themeStore.menuHighlightBgColor" />
				</view>
				<view class="flex justify-between items-center">
					<text>菜单选中高亮字体颜色</text>
					<el-color-picker v-model="themeStore.menuHighlightColor" />
				</view>
				<el-divider content-position="left">界面显示</el-divider>
				<view class="flex justify-between items-center mb-8px">
					<text>弹窗顶部背景颜色</text>
					<el-color-picker v-model="themeStore.dxLayerHeaderBgColor" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>弹窗顶部字体颜色</text>
					<el-color-picker v-model="themeStore.dxLayerHeaderColor" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>弹窗顶部鼠标移入颜色</text>
					<el-color-picker v-model="themeStore.dxLayerHeaderHoverColor" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>是否固定Logo</text>
					<el-switch v-model="themeStore.isFixedLogo" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>是否开启面包屑</text>
					<el-switch v-model="themeStore.isShowBreadcrumb" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>是否显示面包屑图标</text>
					<el-switch v-model="themeStore.isShowBreadcrumbIcon" />
				</view>
				<view class="flex justify-between items-center mb-8px">
					<text>顶部标签栏图标</text>
					<el-switch v-model="themeStore.isShowTagsViewIcon" />
				</view>
				<view class="mt-30px"></view>
				<el-divider content-position="left"></el-divider>
				<view class="flex justify-center">
					<el-button style="width: 100%" type="primary" @click="clearConfig">一键还原</el-button>
				</view>
			</el-scrollbar>
		</el-drawer>
	</view>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import screenfull from 'screenfull';
import { userInfoStore } from '@/uni_modules/dx-admin/stores/user';
import { useThemeStore } from '@/uni_modules/dx-admin/stores/theme';
const userStore = userInfoStore();
const themeStore: any = useThemeStore();
const isFullscreen = ref(false);
const themeDrawer = ref(false);
//全屏
const clickFullscreen = function () {
	if (!screenfull.isEnabled) {
		ElMessage.warning('暂不不支持全屏');
		return false;
	}
	screenfull.toggle();
	screenfull.on('change', () => {
		if (screenfull.isFullscreen) isFullscreen.value = true;
		else isFullscreen.value = false;
	});
};
//菜单/退出
const handleUserCommand = (command: string) => {
	switch (command) {
		case '1':
			uni.reLaunch({
				url: '/',
			});
			break;
		case '2':
			uni.navigateTo({
				url: '/uni_modules/dx-admin/pages/base/info',
			});
			break;
		case '3':
			uni.clearStorageSync();
			uni.reLaunch({
				url: '/uni_modules/dx-admin/pages/login/login',
			});
			break;
	}
};
// 语言
const handleLangCommand = (command: string) => {
	console.log(command);
};
// 清空还原
function clearConfig() {
	uni.removeStorageSync('dx-theme-config');
	window.location.reload();
}
for (let key of themeStore.cacheKeys) {
	watch(
		() => themeStore[key],
		() => {
			themeStore.setCacheConfig(key);
		}
	);
}
</script>
<style lang="scss" scoped>
.configure-layout {
	position: absolute;
	z-index: 109;
	background: #ffffff;
	top: 0;
	left: 0;
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
	width: 100%;
	border-bottom: 1px solid var(--el-border-color);
}
.configure-scrollbar {
	padding-top: 35px;
	text {
		font-size: 14px;
		color: #666666;
	}
}
.user-nav{
	&:focus{
		outline: none;
	}
}
</style>
